<template>
  <a-drawer
    :title="title"
    width="60%"
    placement="right"
    :closable="true"
    :visible="visible"
    @close="close"
  >
    <a-spin :spinning="loading">
      <a-tabs default-active-key="1" size="small" v-model="tabsValue" @change="callback">
        <a-tab-pane key="1" tab="业务表单">
          <div v-for="(items, indexs) in configVo" :key="indexs">
            <div
              style="font-size: 14px;height: 20px;line-height: 20px;font-weight: 600;margin-top: 8px;margin-left: 10px">
              {{ items.configName }}
            </div>
            <vxe-form v-if="items.showType==1" :data="items.values" size="mini" title-align="right">
              <vxe-form-item v-for="(item,index) in items.detailVos" :key="index" :title="item.fieldName"
                             :field="item.fieldValue" :item-render="{}" :title-width="titleWidth" :span="6">
                <template #default="{ data }">
                  <vxe-input v-model="data[item.fieldValue]" clearable :disabled="true"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form>
            <div style="padding:10px" v-if="items.showType==2">
              <vxe-table
                border
                resizable
                show-overflow
                size="mini"
                ref="xTable"
                :loading="loading"
                :data="items.values"
              >
                <vxe-column v-for="(item,index) in items.detailVos" :key="index" :field="item.fieldValue"
                            :title="item.fieldName" :edit-render="{}">
                  <template #default="{ row }">
                  <span v-if="formatIncludes(row[item.fieldValue],'http')">
                    <span v-if="checkImgType(row[item.fieldValue])">
                      <viewer :images="[row[item.fieldValue]]">
                        <a-avatar shape="square" size="small" :src="row[item.fieldValue]"
                                  style="margin-right: 4px"/>
                      </viewer>
                    </span>
                    <a v-else :href="row[item.fieldValue]" target="_blank"> {{ row[item.fieldValue] }}</a>
                  </span>
                    <span v-else>{{ row[item.fieldValue] }}</span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="审批摘要" force-render>
          <div class="big-box">
            <div class="big-title">摘要</div>
            <div class="big-form">
              <div class="form-row">
                <div class="form-title">流程名称</div>
                <div class="form-value">{{ summary.processName || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 流程编号</div>
                <div class="form-value"> {{ summary.processNo || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 发起人</div>
                <div class="form-value"> {{ summary.applierName || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 发起人职位</div>
                <div class="form-value"> {{ summary.applierPositionName || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 主题</div>
                <div class="form-value"> {{ summary.title || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 发起时间</div>
                <div class="form-value"> {{ summary.createTime || '' }}</div>
              </div>
              <div class="form-row">
                <div class="form-title"> 详情</div>
                <div class="form-value"> {{ summary.remarks || '' }}</div>
              </div>
            </div>
          </div>
          <div class="big-box">
            <div class="big-title">附件</div>
            <vxe-table
              border
              resizable
              show-overflow
              size="mini"
              ref="xTable"
              :loading="loading"
              :data="summary.processFiles"
            >
              <vxe-column type="checkbox" width="40"></vxe-column>
              <vxe-column field="objectName" title="附件名称" :edit-render="{}">
              </vxe-column>
              <vxe-column field="createName" title="上传者" :edit-render="{}">
              </vxe-column>
              <vxe-column field=" createTime" title="上传时间" :edit-render="{}">
              </vxe-column>
              <!--            <vxe-column title="操作" width="240">-->
              <!--              -->
              <!--            </vxe-column>-->
            </vxe-table>
          </div>

        </a-tab-pane>
        <a-tab-pane key="3" tab="流程日志">
          <div class="approval row" style="margin-top: 0px; margin-bottom: 10px;">
            <template v-for="(item,index) in logList">
              <div class="approval-title">
                <span>{{ moment(item.logDate).format('YYYY-MM-DD') }}</span>
              </div>
              <div class="approval-box row" v-for="(v,i) in item.optRecordRspVOList">
                <div>
                  <div class="title">
                    <div class="time"> {{ moment(v.createTime).format('HH:mm') }}</div>
                    <div class="fl">操作人员:</div>
                    <div class="fr">{{ moment(v.createTime).format('YYYY-MM-DD HH:mm') }}</div>
                  </div>
                  <div class="bom">
                    <div class="big-form">
                      <div class="form-row">
                        <div class="form-title">处理岗位:</div>
                        <div class="form-value">{{ v.positionName }}</div>
                      </div>
                      <div class="form-row">
                        <div class="form-title"> 操作动作：</div>
                        <div class="form-value"> {{ v.operationStr }}</div>
                      </div>
                      <div class="form-row">
                        <div class="form-title"> 节点名称：</div>
                        <div class="form-value"> {{ v.taskName }}</div>
                      </div>
                      <div class="form-row">
                        <div class="form-title"> 流程名称：</div>
                        <div class="form-value"> {{ v.processName }}</div>
                      </div>
                      <div class="form-row">
                        <div class="form-title"> 处理人：</div>
                        <div class="form-value"> {{ v.userName }}</div>
                      </div>
                      <div class="form-row">
                      </div>
                      <div class="form-row" style="width: 100%">
                        <div class="form-title"> 操作描述：</div>
                        <div class="form-value"> {{ v.content }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </a-tab-pane>
      </a-tabs>

    </a-spin>
    <!--    底部取消\确认按钮-->
    <div
      class="footer"
    >
      <div class="footer-title">请填写审批意见</div>
      <a-textarea placeholder="审核意见" v-model="remarks" :rows="4" class="el-textarea__inner"
                  style="resize: none; min-height: 32px;"/>
      <div class="btn-list">
        <a-button :style="{ marginRight: '8px' }" @click="handleOk(true)" :loading="loading">
          通过
        </a-button>
        <a-button type="primary" @click="handleOk(false)" :loading="loading">
          驳回发起人
        </a-button>
      </div>

    </div>
  </a-drawer>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import CnAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import Area from '@/components/utils/Area'
import JUpload from '@/components/cn-form/JUpload'

const generateUUID = function (withSeparator = true) {
  let d = new Date().getTime()
  d = (d + '').substring(5, (d + '').length)
  return d * 1
}
export default {
  name: 'terminal-modal',
  components: { JTreeSelect, CnAreaLinkage, UploadImage, JImageUpload, JUpload },
  data() {
    return {
      title: '处理',
      loading: false,
      visible: false,
      formData1: {},
      titleWidth: 90,
      tabsValue: '1',
      summary: {},
      configVo: [],
      heiht: 280,
      remarks: '',
      values: [],
      logList: [],
      url: {
        form: window._CONFIG['domianActivitiURL'] + '/actProcessIns/getBusiness',
        summary: window._CONFIG['domianActivitiURL'] + '/actProcessIns/getProcessSummary',
        log: window._CONFIG['domianActivitiURL'] + '/actProcessIns/getOptLogs',
        add: window._CONFIG['domianActivitiURL'] + '/actTask/completeTasks',
      }
    }
  },

  created() {
  },
  methods: {
    moment,
    add() {
      this.edit({})
    },
    formatIncludes(str, key) {
      return (str + '').includes(key)
    },
    //判断是否是图片
    checkImgType(fileName) {
      if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)) {
        return false
      } else {
        return true
      }
    },
    // 获取表单数据
    async getForm(record) {
      let res = await getAction(this.url.form, { crmProcessInstanceId: record.id })
      if (res.success) {
        res.result.configVo.forEach(item => {
          if (item.showType == 1) {
            item.values = item.values && item.values.length ? item.values[0] : {}
          }
        })
        console.log(res.result.configVo)
        this.configVo = res.result.configVo || []

        // this.formData1 = res.result.values[res.result.configVo.configCode][0]
      }
      this.loading = false
    },
    // 获取摘要数据
    async getSummary(record) {
      let val = await getAction(this.url.summary, { crmProcessInstanceId: record.id })
      if (val.success) {
        this.summary = val.result
      }
    },
    // 获取日志数据
    async getLog(record) {
      let log = await postAction(this.url.log, { processInstanceId: record.processInstanceId })
      if (log.success) {
        this.logList = log.result
      }
    },
    edit(record) {
      this.loading = true
      this.tabsValue = '1'
      this.getForm(record)
      this.getSummary(record)
      this.getLog(record)
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.remarks = ''
      this.configVo = []
      this.summary = {}
      this.logList = []
    },

    async handleOk(pass) {
      const that = this
      that.loading = true
      let formData = Object.assign({}, {
        remarks: this.remarks,
        taskId: this.model.taskId,
        pass: pass,
        crmProcessInstanceId: this.model.id
      })
      httpAction(this.url.add, formData, 'post').then((res) => {
        if (res.success) {
          this.close()
          that.$emit('ok')
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.loading = false
      })
    },
    handleCancel() {
      this.close()
    },

  }
}
</script>
<style scoped lang="less">
/deep/ .ant-drawer-body {
  padding: 0 8px;
}

/deep/ .ant-tabs-tabpane {
  height: calc(100vh - 280px);
  overflow-y: scroll;
}

.big-title {
  border-left: 4px solid #409eff;
  margin-bottom: 10px;
  padding-left: 10px;
  font-size: 15px;
}

.big-form {
  line-height: 40px;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 0 0 20px 14px;
}

.form-row {
  width: 50%;
  flex-shrink: 0;
  display: flex;

}

.form-title {
  width: 100px;
  flex-shrink: 0;
  color: #333;
  font-weight: 700;
}

.form-value {
  flex: 1;
  flex-shrink: 0;
}

.approval {
  padding: 0 15px 0 30px;
  margin-top: 20px;
  position: relative;
}

.approval::before {
  content: "";
  width: 2px;
  height: 100%;
  display: block;
  background: #3796d4;
  position: absolute;
  left: 26px;
  top: 0;
}

.approval-title {
  height: 26px;
  font-size: 14px;
}

.approval-title span {
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  display: inline-block;
  color: #fff;
  padding: 0 35px 0 15px;
  border-radius: 3px;
  background: url(https://peixun.chinayanghe.com/eispactiviti/resources/images/main/blue.png) no-repeat;
  position: relative;
}

.approval-box {
  padding-left: 50px;
  padding-bottom: 10px;
}

.title {
  height: 28px;
  border: 1px solid #eee;
  background-color: #f8f8f8;
  margin-top: 20px;
  color: #666;
  font-size: 12px;
  padding: 0 20px;
  line-height: 28px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.time {
  width: 60px;
  height: 20px;
  line-height: 20px;
  background-color: #fff;
  position: absolute;
  left: -70px;
  top: 0;
}

.bom {
  border: 1px solid #eee;
  border-top: 0;
  background-color: #f5f9fc;
  color: #666;
  font-size: 12px;
  padding: 10px;
}

.bom > .big-form {
  line-height: 28px;
  padding: 0 0 0 14px;
}

.bom > .big-form > .form-row {
  width: 33%;
}

.bom > .big-form > .form-row > .form-title {
  font-weight: 400;
}

.bom > .big-form > .form-row > .form-value {
  font-weight: 700;
}

.footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 0 14px 0 rgb(0 0 0 / 10%);
  font-size: 12px;
}

.footer-title {
  font-size: 15px;
  color: #333;
  line-height: 16px;
  margin-bottom: 10px;
}

.el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: inherit;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.btn-list {
  margin-top: 10px;
}
</style>